<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,maximum-scale=1.0, minimun-scale=1.0,initial-scale=1.0">
	<title>瓢城旅行社--响应式</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">
	<div class="center">
		<h1 class="logo">瓢城旅行社</h1>
		<nav class="link">
			<h2 class="none">页面导航</h2>
	        <ul>
	            <li><a href="index.html">首页</a></li>
	            <li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
	            <li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
	            <li class="active xs-hidden"><a href="scenery.html">风景欣赏</a></li>
	            <li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
	        </ul>
        </nav>
	</div>
</header>
<div id="headline">
	<img src="images/headline.jpg" alt="">
		<hgroup>
				<h2>风景欣赏</h2>
				<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
		</hgroup>
</div>
<div id="container">
	<aside class="sidebar">
		<div class="sidebox recomment">
			<h2>景点推荐</h2>
			<ul>
				<li><a href="###">曼谷(12)</a></li>
				<li><a href="###">东京(5)</a></li>
				<li><a href="###">西双版纳(8)</a></li>
				<li><a href="###">漓江(16)</a></li>
				<li><a href="###">呼伦贝尔(4)</a></li>
				<li><a href="###">首尔(9)</a></li>
				<li><a href="###">巴厘岛(15)</a></li>
				<li><a href="###">土耳其(22)</a></li>
				<li><a href="###">夏威夷(5)</a></li>
				<li><a href="###">巴厘岛(11)</a></li>
				<li><a href="###">毛里求斯(7)</a></li>
				<li><a href="###">吉普岛(4)</a></li>
				<li><a href="###">希腊(18)</a></li>
				<li><a href="###">法瑞意(8)</a></li>
				<li><a href="###">马尔代夫(9)</a></li>
				<li><a href="###">新西兰(16)</a></li>
				<li><a href="###">埃及(11)</a></li>
				<li><a href="###">迪拜(14)</a></li>
				<li><a href="###">斯里兰卡(7)</a></li>
				<li><a href="###">麦哈顿(3)</a></li>
				<li><a href="###">大阪(15)</a></li>
			</ul>
		</div>
		<div class="sidebox hot">
			<h2>热门旅游</h2>
			<div class="figure">
				<figure>
					<img src="images/hot1.jpg" alt="">
					<figcaption>曼谷-芭提雅6日游</figcaption>
				</figure>
				<figure>
					<img src="images/hot2.jpg" alt="">
					<figcaption>曼谷-芭提雅6日游</figcaption>
				</figure>
				<figure>
					<img src="images/hot3.jpg" alt="">
					<figcaption>曼谷-芭提雅6日游</figcaption>
				</figure>
				<figure>
					<img src="images/hot4.jpg" alt="">
					<figcaption>曼谷-芭提雅6日游</figcaption>
				</figure>
				<figure>
					<img src="images/hot5.jpg" alt="">
					<figcaption>曼谷-芭提雅6日游</figcaption>
				</figure>
				<figure>
					<img src="images/hot6.jpg" alt="">
					<figcaption>曼谷-芭提雅6日游</figcaption>
				</figure>
			</div>
		</div>
	</aside>
	<div class="list ticket">
		<form action="#">
			<h2>机票预定</h2>
			<p class="type">航班类型 <mark>单程</mark> 往返</p>
			<div class="form">
				<p>				
					<label for="from_city">出发城市</label> 
					<input type="text" placeholder="城市名" name="from_city" id="from_city">
				</p>
				<p>
					<label for="to_city">返回城市</label> 
					<input type="text" placeholder="城市名" name="to_city" id="to_city">
				</p>


			</div>
			<div class="form">
				<p>
					<label for="from_time">出发时间</label> 
					<input type="text" placeholder="时间/日期" name="from_time" id="from_time">
				</p>
				<p>
					<label for="to_time">返回时间</label> 
					<input type="text" placeholder="时间/日期" name="to_time" id="to_time">
				</p>

			</div>
			<div class="button"><button>订票</button></div>
		</form>
		<div class="new">
			<h2>最新机票</h2>
			<ul>
				<li><a href="###">热门城市：</a></li>
				<li><a href="###">北京</a></li>
				<li><a href="###">上海</a></li>
				<li><a href="###">广州</a></li>
				<li><a href="###">深圳</a></li>
				<li><a href="###">重庆</a></li>
				<li><a href="###">成都</a></li>
				<li><a href="###">杭州</a></li>
				<li><a href="###">南京</a></li>
			</ul>
			<table>
				<thead>
					<tr>
						<th>路线</th>
						<th>日期</th>
						<th>价格</th>
						<th class="xs-hidden">税费</th>
						<th class="xs-hidden">餐食</th>
						<th>航班</th>
						<th>预定</th>	
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>北京-成都</td>
						<td>10-15</td>
						<td><strong>¥745</strong></td>
						<td class="xs-hidden">¥50</td>
						<td class="xs-hidden">有</td>
						<td>春秋航空</td>
						<td><a href="###">预定</a></td>
					</tr>
					<tr>
						<td>北京-成都</td>
						<td>10-15</td>
						<td><strong>¥745</strong></td>
						<td class="xs-hidden">¥50</td>
						<td class="xs-hidden">有</td>
						<td>春秋航空</td>
						<td><a href="###">预定</a></td>
					</tr>
					<tr>
						<td>北京-成都</td>
						<td>10-15</td>
						<td><strong>¥745</strong></td>
						<td class="xs-hidden">¥50</td>
						<td class="xs-hidden">有</td>
						<td>春秋航空</td>
						<td><a href="###">预定</a></td>
					</tr>
					<tr>
						<td>北京-成都</td>
						<td>10-15</td>
						<td><strong>¥745</strong></td>
						<td class="xs-hidden">¥50</td>
						<td class="xs-hidden">有</td>
						<td>春秋航空</td>
						<td><a href="###">预定</a></td>
					</tr>
					<tr>
						<td>北京-成都</td>
						<td>10-15</td>
						<td><strong>¥745</strong></td>
						<td class="xs-hidden">¥50</td>
						<td class="xs-hidden">有</td>
						<td>春秋航空</td>
						<td><a href="###">预定</a></td>
					</tr>
					<tr>
						<td>北京-成都</td>
						<td>10-15</td>
						<td><strong>¥745</strong></td>
						<td class="xs-hidden">¥50</td>
						<td class="xs-hidden">有</td>
						<td>春秋航空</td>
						<td><a href="###">预定</a></td>
					</tr>
					<tr>
						<td>北京-成都</td>
						<td>10-15</td>
						<td><strong>¥745</strong></td>
						<td class="xs-hidden">¥50</td>
						<td class="xs-hidden">有</td>
						<td>春秋航空</td>
						<td><a href="###">预定</a></td>
					</tr>
					<tr>
						<td>北京-成都</td>
						<td>10-15</td>
						<td><strong>¥745</strong></td>
						<td class="xs-hidden">¥50</td>
						<td class="xs-hidden">有</td>
						<td>春秋航空</td>
						<td><a href="###">预定</a></td>
					</tr>
					<tr>
						<td>北京-成都</td>
						<td>10-15</td>
						<td><strong>¥745</strong></td>
						<td class="xs-hidden">¥50</td>
						<td class="xs-hidden">有</td>
						<td>春秋航空</td>
						<td><a href="###">预定</a></td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="7">加载更多航班...</td>
					</tr>
				</tfoot>
			</table>
		</div>
	</div>
</div>

<footer id="footer" class="clearfix">
	<div class="top clearfix sm-hidden">
		<div class="block left">
			<h2>合作伙伴</h2>
			<hr>
			<ul>
				<li>途牛旅游网</li>
				<li>驴妈妈旅游网</li>
				<li>携程旅游</li>
				<li>中国青年旅行社</li>
			</ul>
		</div>
		<div class="block center">
			<h2>旅游FAQ</h2>
			<hr>
			<ul>
				<li>旅游合同签订方式？</li>
				<li>儿童价是基于什么制定的？</li>
				<li>旅游的线路品质怎么界定的？</li>
				<li>单房差是什么？</li>
				<li>旅游保险有那些种类？</li>
			</ul>
		</div>
		<div class="block right">
			<h2>联系方式</h2>
			<hr>
			<ul>
				<li>微博：weibo.com/ycku</li>
				<li>邮件：ycku@ycku.com</li>
				<li>地址：江苏盐城无名路123 号</li>
			</ul>
		</div>
	</div>
	<div class="version sm-visible">
		客户端 | 触屏版 | 电脑版
	</div>
	<div class="bottom">Copyright &copy; YCKU 瓢城旅行社| 苏ICP 备120110119 号<span class="sm-hidden">| 旅行社经营许可证：L-YC-BK12345</span></div>
</footer>
</body>
</html>